<template>
  <div class="px-dropdown">
    <div @click.stop="() => show = !show"><slot /></div>
    <div :class="['wrapper', position]" v-show="show">
      <div v-for="(op, i) in options" class="item" :key="i" @click.stop="() => onClick(op, i)">{{op.name}}</div>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from 'vue'
export default {
  props: {
    options: {type: Array, default: () => []},
    position: {type: String, default: 'right'}
  },
  setup(props, {emit}){
    let show = ref(false)
    const onClick = (op, i) => {
      emit('click', {i, ...op})
      show.value = false
    }

    onMounted(() => {
      document.addEventListener('click', () => {
        show.value = false
      })
    })

    return {
      onClick,
      show
    }
  }
}
</script>

<style lang="less" scoped>
.px-dropdown{
  position: relative;
  z-index: 990;
  .item{
    padding: .5rem 1.2rem;
    word-break: keep-all;
    &:hover{
      color: @primary-color;
      background-color: @background-gray;
    }
  }
  .wrapper{
    padding: .5rem 0;
    position: absolute;
    right: 0;
    top: 100%;
    box-shadow: @box-shadow;
    border-radius: @box-radius;
    min-width: 100px;
    background: #fff;
    &.left{
      left: 0;
    }
    &.top{
      top: auto;
      bottom: 100%;
    }
  }
}
</style>